<template>
  <div class="radio-selector hover-style">
    <div class="selector" v-for="(item, index) in options" :key="item.id">
      <div class="dot" @click="handleRadioClick(index)">
        <div class="dot-unselected" v-show="index !== activeSwitchIndex">
        </div>
        <div class="circle" v-show="index == activeSwitchIndex">
          <div class="dot-in"></div>
        </div>
      </div>
      <div class="title">{{item.name}}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    options: {
      type: Array,
      default: function() {
        return [
          {
            id: 1,
            name: '遗漏',
            
          },
          {
            id: 2,
            name: '冷门',
          },
        ]
      }
    },
    activeSwitchIndex: {
      type: Number,
      default: 0
    }
  },
  
  methods: {
    handleRadioClick(index) {
      this.$emit('click', index)
    }
  },
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
@import '~@/assets/styles/mixins.styl'
  .radio-selector
    display flex
    .selector 
      display flex
      align-items center
      margin-right 30px
      .dot 
        position relative 
        width 16px 
        height 16px 
        margin-right 5px
        extend-click()
        .dot-unselected 
          width 16px 
          height 16px 
          border-radius 50% 
          border 1px solid #dcd4d4 
          box-sizing border-box
          background linear-gradient(180deg, #dcd4d4, #f2f1f1)
          position absolute 
          top 0
          left 0
          right 0
          bottom 0
        .circle 
          width 16px 
          height 16px 
          border-radius 50% 
          box-sizing border-box 
          border 1px solid $color-theme-red 
          position absolute 
          top: 0
          right 0
          bottom 0
          left 0
          .dot-in 
            width 10px 
            height 10px 
            border-radius 50% 
            box-sizing border-box 
            background $color-theme-red 
            position absolute 
            top 50% 
            left 50%
            transform translate(-50%, -50%)


</style>